<template>
  <view class="news-content-page">
    <!-- 返回按钮 -->
    <view class="back-btn" @click="goBack">←</view>

    <!-- 新闻标题+来源 -->
    <view class="news-header">
      <text class="news-title">{{ newsData.title }}</text>
      <view class="news-source">
        <image :src="newsData.sourceIcon" class="source-icon" />
        <text class="source-text">{{ newsData.source }}</text>
      </view>
    </view>

    <!-- 作者信息+关注 -->
    <view class="author-info">
      <image :src="newsData.authorAvatar" class="author-avatar" />
      <view class="author-meta">
        <text class="author-name">{{ newsData.author }}</text>
        <text class="publish-time">{{ newsData.time }}</text>
      </view>
      <button class="follow-btn" @click="toggleFollow" :class="{ followed: isFollowed }">
        {{ isFollowed ? '已关注' : '+关注' }}
      </button>
    </view>

    <!-- 新闻正文 -->
    <view class="news-body">{{ newsData.content }}</view>

    <!-- 精彩推荐 -->
    <view class="recommend-section">
      <text class="section-title">精彩推荐</text>
      <view class="recommend-item" v-for="item in recommendList" :key="item.id" @click="toContent(item.type, item.id)">
        <image :src="item.cover" class="recommend-cover" />
        <text class="recommend-title">{{ item.title }}</text>
        <text class="recommend-meta">{{ item.source }} · {{ item.viewCount }}评</text>
      </view>
    </view>

    <!-- 评论区 -->
    <view class="comment-section">
      <text class="section-title">热评</text>
      <view class="comment-item" v-for="comment in commentList" :key="comment.id">
        <image :src="comment.avatar" class="comment-avatar" />
        <view class="comment-info">
          <view class="comment-header">
            <text class="comment-user">{{ comment.user }}</text>
            <text class="comment-time">{{ comment.time }}</text>
          </view>
          <text class="comment-content">{{ comment.content }}</text>
          <view class="comment-action">
            <text class="like-btn" @click="likeComment(comment.id)">{{ comment.likeCount }} ♡</text>
            <text class="reply-btn">💬 回复</text>
          </view>
        </view>
      </view>
      <!-- 添加评论 -->
      <view class="comment-input-area">
        <input class="comment-input" placeholder="我来说两句" v-model="newComment" />
        <button class="send-btn" @click="sendComment">发送</button>
      </view>
    </view>

    <CustomTabBar />
  </view>
</template>

<script setup>
import { ref, onLoad } from 'vue';
import CustomTabBar from '@/components/CustomTabBar.vue';

// 新闻数据
const newsData = ref({
  title: "曼联客场不败场次在英超排名第二",
  source: "大河网",
  sourceIcon: "/static/icon/dahe.png",
  author: "体育编辑",
  authorAvatar: "/static/avatar/author1.png",
  time: "12/14 10:53",
  content: "曼联客场对阵阿斯顿维拉...最终红魔以3-1的比分战胜了对手。由于最近一段时间曼联赛程十分密集...",
});
// 推荐列表
const recommendList = ref([
  { id: 2, type: "news", title: "单节24分，5个三分球！库里打疯了", source: "科技头条", viewCount: 3737, cover: "/static/recommend1.jpg" },
]);
// 评论数据
const commentList = ref([
  { id: 1, user: "网友872503", avatar: "/static/avatar1.png", time: "2小时前", content: "微笑生活，勇敢面对。", likeCount: 7 },
]);
const newComment = ref("");
const isFollowed = ref(false);

// 接收参数
onLoad((options) => {
  const newsId = options.id;
  // 实际项目中根据ID请求数据
});

// 返回上一页
const goBack = () => uni.navigateBack();
// 关注作者
const toggleFollow = () => isFollowed.value = !isFollowed.value;
// 点赞评论
const likeComment = (id) => {
  const comment = commentList.value.find(item => item.id === id);
  if (comment) comment.likeCount++;
};
// 发布评论
const sendComment = () => {
  if (!newComment.value) return;
  commentList.value.unshift({
    id: Date.now(), user: "我", avatar: "/static/my-avatar.png", time: "刚刚", content: newComment.value, likeCount: 0
  });
  newComment.value = "";
};
// 跳转到对应内容页
const toContent = (type, id) => {
  uni.navigateTo({ url: `/pages/${type}-content/${type}-content?id=${id}` });
};
</script>

<style scoped>
/* 样式匹配设计图，省略（参考之前的样式结构） */
</style>